<template>
  <div id="calendar" class="calendar">
    <inline-calendar
      ref="calendar"
      @this.on-change="onChange"
      @this.on-view-change="onViewChange"
      @this.on-select-single-date="onSelectSingleDate"
      class="inline-calendar-demo"
      :show.sync="show"
      v-model="value"
      :start-date="startDay"
      :end-date="endDay"
      :range="range"
      :show-last-month="showLastMonth"
      :show-next-month="showNextMonth"
      :highlight-weekend="highlightWeekend"
      :return-six-rows="return6Rows"
      :hide-header="hideHeader"
      :hide-week-list="hideWeekList"
      :replace-text-list="replaceTextList"
      :weeks-list="weeksList"
      :render-function="buildSlotFn"
      :disable-past="disablePast"
      :disable-future="disableFuture"
      :disable-weekend="disableWeekend"
      :disable-date-function="disableDateFunction">
    </inline-calendar>

    <card :header="{title: value }" :footer="{title: cardMore,link:'/lesson'}">
	    <div v-if="hasActivity == 'ok'"  id="activityCalendar" slot="content" class="activityCalendar">
		    <div v-for="item in activityList">
			    <h2>{{item.title}}</h2>
			    <p>{{curActivityTime}}</p>
			    <p>{{item.content}}</p>
		    </div>
	    </div>
	    <div v-else slot="content">
		    <p>今天没有活动，记得要去安排活动哦</p>
	    </div>
    </card>

  </div>
</template>

<script>
	import NetWorking from '../../../utils/networking'
	import DateUtils from '../../../utils/date'
  import { InlineCalendar, Group, XSwitch, Radio, XButton, Cell, Divider, Card } from 'vux'

  export default {
    name: "calendar",
    methods: {
      onChange (val) {
        console.log('on-change', val)
      },
      onViewChange (val, count) {
        console.log('on view change', val, count)
      },
      onSelectSingleDate (val) {
        console.log('data', val)
      }
    },
	  created: function () {
      this.initCalendar();
    },
    methods: {
      initCalendar: function () {
      	this.initDateList();
        this.replaceToday(this.replace);
        this.initDate();
        this.getActivityByDate(this.value);
      },
	    initDateList: function () {
		    let _this = this
		    NetWorking.doGet(
			    '/user_activity/getDateHasActivity',
			    null,
			    null
		    ).then(
			    response => {
				    let rs = response.data
				    if(rs.error_code == 0){
					    _this.dateList = rs.date_list
					    _this.showDot(this.useCustomFn);
				    } else {
					    alert(rs.error_message)
				    }
			    }
		    )
	    },
	    getActivityByDate: function(date) {
      	let _this = this
		    NetWorking.doGet(
		    	'/user_activity/getMyActivityByDate',
			    null,
			    {
			    	params: {
			    		date: date
				    }
			    }
		    ).then(
		    	response => {
		    		let rs = response.data
				    if(rs.error_code == 0){
		    			_this.activityList = rs.activity_list
					    if(_this.activityList.length > 0){
		    				_this.hasActivity = 'ok'
					    }else{
		    				_this.hasActivity = 'no'
					    }
				    } else {
		    			alert(rs.error_message)
		    		}
			    }
		    )
	    },
      replaceToday: function (val) {
        this.replaceTextList = val ? {
          'TODAY': '今'
        } : {}
      },
	    initDate: function () {
		    var today = new Date()
		    var dd = today.getDate()
		    if(dd < 10){
		    	dd = '0' + dd
		    }
		    var mm = today.getMonth()+1 //January is 0!
		    if(mm < 10){
		    	mm = '0' + mm
		    }
		    var yyyy = today.getFullYear()

		    this.value = yyyy + '-' + mm + '-' + dd

		    var start_yyyy = today.getFullYear() - 1
		    var end_yyyy = today.getFullYear() + 1

		    this.startDay = start_yyyy + '-' + mm + '-' + dd
		    this.endDay = end_yyyy + '-' + mm + '-' + dd
	    },
      showDot: function(val) {
        this.buildSlotFn = val ? (line, index, data) => {
        	if(this.contains(this.dateList, data.formatedDate)){
		        return '<div style="font-size:12px;text-align:center;"><span style="display:inline-block;width:5px;height:5px;background-color:red;border-radius:50%;"></span></div>'
	        }else{
        		return '<div style="height:19px;"></div>'
	        }
        } : () => ''
      },
	    contains: function (arr, obj) {
		    var i = arr.length;
		    while (i--) {
			    if (arr[i] === obj) {
				    return true;
			    }
		    }
		    return false;
	    }
    },
    data () {
      return {
        hasActivity: 'no',
	      noContent: '没有内容',
	      curActivityTime: '',
	      dateList: [],
	      item: '',
	      activityList: [],
        startDay: '',
	      endDay: '',
        cardMore: '查看更多',
        activityTime: '10:00',
        title: '测试',
        desc: '测试描述',
        addPointTitle: '加红点',
        currentValue: '当前值',
        startDate: '起始日期',
        show: true,
        value: '2018-04-17',
        listValue: '',
        range: false,
        showLastMonth: false,
        showNextMonth: false,
        highlightWeekend: true, //高亮周末
        return6Rows: true,
        hideHeader: false, //隐藏头
        hideWeekList: false,
        replaceTextList: {},
        replace: true,
        changeWeeksList: false,
        weeksList: [],
        useCustomFn: true, //对日期下方加点
        buildSlotFn: () => '',
        disablePast: false,
        disableFuture: false,
        disableWeekend: false,
        disableDateFunction (date) {
          if (date.formatedDate === '2017-10-16') {
            return true
          }
        }
      }
    },
    watch: {
      changeWeeksList (val) {
        this.weeksList = val ? ['日', '一', '二', '三', '四', '五', '六 '] : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
      },
	    activityList: function () {
		    for(var i=0; i<this.activityList.length; i++){
			    this.curActivityTime = DateUtils.getCusTime(this.activityList[i].time)
		    }
	    },
      value: function () {
        this.activityList = ''
	      this.getActivityByDate(this.value)
      }
    },
    components: {
      InlineCalendar,
      Group,
      XSwitch,
      Radio,
      XButton,
      Cell,
      Divider,
      Card
    }
  }
</script>

<style lang="less">
  .inline-calendar-demo {
    background: rgba(255,255,255,0.9);
  }

  .weui-panel__hd {
    padding: 14px 5px 10px !important;
    background-color: #eeba68 !important;
    color: white !important;
    font-size: 18px !important;
  }

  .weui-cell > .weui-cell__bd {
    text-align: right;
  }

  .card-title {
    font-size: 18px;
    font-weight: 700;
    margin: 5px;
  }

  .card-time {
    font-size: 16px;
    margin: 5px;
  }

  .card-content {
    font-size: 14px;
    margin: 5px;
  }

  .calendar {
    border: solid;
    border-color: #f7f7fa;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 20px;
    box-shadow: 5px 5px 5px #888888;
    border-radius: 25px;
  }

  .inline-calendar {
	  border-radius: 25px !important;
  }

  .inline-calendar td {
	  padding: 0 !important;
  }

  .weui-panel{
    margin-bottom: 20px;
  }

</style>
